<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            display: inline-block;
            width: 100px;
            height: 30px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<form action="" id="box">

 
</form>
    <script>
        var arr = [{

label: "用户名",

name: "username",

type: "text"

}, {

label: "密码",

name: "password",

type: "password"

}, {

label: "性别",

name: "gender",

type: "select",

value: ['男', '女', '不男', '不女', 'Gay', '妖王']

}, {

label: "爱好",

name: "hobby",

type: "checkbox",

value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']

}, {

label: '是否已婚',

name: 'married',

type: 'radio',

value: ['已婚', '未婚']

},
{

label: '简介',

name: 'resume',

type: 'textarea'

}];

arr.forEach(function(item,index){
    box.innerHTML=`
    <form action="" id="box">
    <span>${arr[0].label}</span>
    <input type="${arr[0].type}">
    <br>
    <br>
    <span>${arr[1].label}</span>
    <input type="${arr[1].type}">
    <br>
    <br>
    <span>${arr[2].label}</span>
    <select name="" id="">
        <option value="">男</option>
        <option value="">女</option>
    </select>
    <span>爱好</span>
    <input type="${arr[3].type}">篮球
    <input type="${arr[3].type}">足球
    <input type="${arr[3].type}">羽毛球
    <input type="${arr[3].type}">兵兵球
    <input type="${arr[3].type}">爬山
    <input type="${arr[3].type}">购物
    <input type="${arr[3].type}">旅游
    <input type="${arr[3].type}">看美女
    <br>
    <br>
    <span>${arr[4].label}</span>
  <input type="${arr[4].type}">已婚
  <input type="${arr[4].type}">未婚
  <br>
  <br>
  <span>${arr[5].label}</span>
  <div class="div1"></div>
</form>
    
    
    
    
    `
})
    

    </script>
</body>
</html>